<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<!-- <view class="nav-bar">
			<view class="back-btn" @tap="goBack">
				<image src="https://jf2411-dd.oss-cn-hangzhou.aliyuncs.com/return.png" mode="aspectFit" style="width: 30px;height: 30px;"></image>
			</view>
			<text class="title">收入记录</text>
		</view> -->
		
		<!-- 收入统计卡片 -->
		<view class="stats-card">
			<view class="stats-header">
				<view class="time-selector" @tap="showTimePicker">
					<text>{{currentTimeRange}}</text>
					<text class="iconfont icon-down">$</text>
				</view>
			</view>
			<view class="stats-content">
				<view class="stats-item">
					<text class="stats-label">总收入（元）</text>
					<text class="stats-value">{{totalIncome}}</text>
				</view>
				<view class="stats-item">
					<text class="stats-label">订单数</text>
					<text class="stats-value">{{orderCount}}</text>
				</view>
				<view class="stats-item">
					<text class="stats-label">平均单价</text>
					<text class="stats-value">¥{{averagePrice}}</text>
				</view>
			</view>
		</view>
		
		<!-- 收入明细列表 -->
		<view class="revenue-list">
			<view class="list-header">
				<view class="filter-tabs">
					<view class="tab-item" 
						v-for="(tab, index) in filterTabs" 
						:key="index"
						:class="{'active': currentTab === tab.value}"
						@tap="switchTab(tab.value)">
						{{tab.label}}
					</view>
				</view>
			</view>
			
			<scroll-view class="list-content" scroll-y @scrolltolower="loadMoreRecords">
				<view class="revenue-item" v-for="(item, index) in revenueList" :key="index">
					<view class="revenue-info">
						<view class="order-type">
							<text class="type-tag" :class="item.type">{{item.typeText}}</text>
							<text class="order-time">{{item.time}}</text>
						</view>
						<view class="order-detail">
							<text class="start-address">{{item.startAddress}}</text>
							<text class="end-address">{{item.endAddress}}</text>
						</view>
					</view>
					<view class="revenue-amount">
						<text class="amount">¥{{item.amount}}</text>
						<text class="status" :class="item.status">{{item.statusText}}</text>
					</view>
				</view>
				<view class="no-more" v-if="noMore">没有更多记录了</view>
			</scroll-view>
		</view>
		
		<!-- 时间选择弹窗 -->
		<view class="popup" v-if="showTimePicker">
			<view class="popup-mask" @tap="closeTimePicker"></view>
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">选择时间范围</text>
					<view class="close-btn" @tap="closeTimePicker">×</view>
				</view>
				<view class="popup-body">
					<view class="time-options">
						<view class="time-option" 
							v-for="(option, index) in timeOptions" 
							:key="index"
							:class="{'active': currentTimeRange === option.label}"
							@tap="selectTimeRange(option)">
							{{option.label}}
						</view>
					</view>
					<view class="custom-time" v-if="showCustomTime">
						<picker mode="date" :value="startDate" @change="onStartDateChange">
							<view class="picker-item">
								<text>开始日期</text>
								<text>{{startDate}}</text>
							</view>
						</picker>
						<picker mode="date" :value="endDate" @change="onEndDateChange">
							<view class="picker-item">
								<text>结束日期</text>
								<text>{{endDate}}</text>
							</view>
						</picker>
					</view>
					<button class="confirm-btn" @tap="confirmTimeRange">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 时间筛选相关
				currentTimeRange: '今日',
				showTimePicker: false,
				showCustomTime: false,
				timeOptions: [
					{ label: '今日', value: 'today' },
					{ label: '本周', value: 'week' },
					{ label: '本月', value: 'month' },
					{ label: '自定义', value: 'custom' }
				],
				startDate: '',
				endDate: '',
				
				// 收入统计相关
				totalIncome: '0.00',
				orderCount: 0,
				averagePrice: '0.00',
				
				// 筛选标签
				filterTabs: [
					{ label: '全部', value: 'all' },
					{ label: '已完成', value: 'completed' },
					{ label: '进行中', value: 'processing' },
					{ label: '已取消', value: 'cancelled' }
				],
				currentTab: 'all',
				
				// 收入记录列表
				revenueList: [],
				page: 1,
				noMore: false
			}
		},
		onLoad() {
			this.loadRevenueData()
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			
			// 加载收入数据
			loadRevenueData() {
				// 模拟数据，实际应该调用API
				this.totalIncome = '1234.56'
				this.orderCount = 15
				this.averagePrice = '82.30'
				
				const mockRecords = Array(10).fill().map((_, index) => ({
					type: ['normal', 'urgent', 'special'][Math.floor(Math.random() * 3)],
					typeText: ['普通订单', '加急订单', '特殊订单'][Math.floor(Math.random() * 3)],
					time: '2024-03-20 14:30',
					startAddress: '广州市天河区天河路385号太古汇',
					endAddress: '广州市海珠区新港东路123号',
					amount: (Math.random() * 100).toFixed(2),
					status: ['completed', 'processing', 'cancelled'][Math.floor(Math.random() * 3)],
					statusText: ['已完成', '进行中', '已取消'][Math.floor(Math.random() * 3)]
				}))
				this.revenueList = mockRecords
			},
			
			// 加载更多记录
			loadMoreRecords() {
				if (this.noMore) return
				// 模拟加载更多
				setTimeout(() => {
					const moreRecords = Array(5).fill().map((_, index) => ({
						type: ['normal', 'urgent', 'special'][Math.floor(Math.random() * 3)],
						typeText: ['普通订单', '加急订单', '特殊订单'][Math.floor(Math.random() * 3)],
						time: '2024-03-20 14:30',
						startAddress: '广州市天河区天河路385号太古汇',
						endAddress: '广州市海珠区新港东路123号',
						amount: (Math.random() * 100).toFixed(2),
						status: ['completed', 'processing', 'cancelled'][Math.floor(Math.random() * 3)],
						statusText: ['已完成', '进行中', '已取消'][Math.floor(Math.random() * 3)]
					}))
					this.revenueList = [...this.revenueList, ...moreRecords]
					if (this.page >= 3) {
						this.noMore = true
					}
					this.page++
				}, 1000)
			},
			
			// 切换筛选标签
			switchTab(tab) {
				this.currentTab = tab
				this.page = 1
				this.noMore = false
				this.loadRevenueData()
			},
			
			// 显示时间选择器
			showTimePicker() {
				this.showTimePicker = true
			},
			
			// 关闭时间选择器
			closeTimePicker() {
				this.showTimePicker = false
				this.showCustomTime = false
			},
			
			// 选择时间范围
			selectTimeRange(option) {
				if (option.value === 'custom') {
					this.showCustomTime = true
				} else {
					this.currentTimeRange = option.label
					this.closeTimePicker()
					this.loadRevenueData()
				}
			},
			
			// 开始日期变化
			onStartDateChange(e) {
				this.startDate = e.detail.value
			},
			
			// 结束日期变化
			onEndDateChange(e) {
				this.endDate = e.detail.value
			},
			
			// 确认时间范围
			confirmTimeRange() {
				if (this.showCustomTime) {
					if (!this.startDate || !this.endDate) {
						uni.showToast({
							title: '请选择完整的日期范围',
							icon: 'none'
						})
						return
					}
					this.currentTimeRange = `${this.startDate} 至 ${this.endDate}`
				}
				this.closeTimePicker()
				this.loadRevenueData()
			},
		}
	}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 100rpx;
}

.nav-bar {
	height: 88rpx;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	position: relative;
}

.back-btn {
	position: absolute;
	left: 30rpx;
}

.title {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.stats-card {
	background-color: #1B6EF3;
	padding: 30rpx;
	color: #fff;
}

.stats-header {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 30rpx;
}

.time-selector {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	opacity: 0.9;
	
	.iconfont {
		margin-left: 10rpx;
	}
}

.stats-content {
	display: flex;
	justify-content: space-between;
}

.stats-item {
	text-align: center;
	flex: 1;
}

.stats-label {
	font-size: 24rpx;
	opacity: 0.8;
	margin-bottom: 10rpx;
	display: block;
}

.stats-value {
	font-size: 36rpx;
	font-weight: bold;
}

.revenue-list {
	background-color: #fff;
	margin-top: 20rpx;
}

.list-header {
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.filter-tabs {
	display: flex;
	justify-content: space-between;
}

.tab-item {
	font-size: 28rpx;
	color: #666;
	padding: 10rpx 20rpx;
	border-radius: 30rpx;
	
	&.active {
		color: #1B6EF3;
		background-color: rgba(27, 110, 243, 0.1);
	}
}

.list-content {
	height: calc(100vh - 400rpx);
}

.revenue-item {
	display: flex;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.revenue-info {
	flex: 1;
	margin-right: 20rpx;
}

.order-type {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
}

.type-tag {
	font-size: 24rpx;
	padding: 4rpx 12rpx;
	border-radius: 4rpx;
	margin-right: 10rpx;
	
	&.normal {
		background-color: #E8F3FF;
		color: #1B6EF3;
	}
	
	&.urgent {
		background-color: #FFE8E8;
		color: #FF3B30;
	}
	
	&.special {
		background-color: #FFF3E8;
		color: #FF9500;
	}
}

.order-time {
	font-size: 24rpx;
	color: #999;
}

.order-detail {
	font-size: 28rpx;
	color: #333;
}

.start-address, .end-address {
	display: block;
	margin-bottom: 6rpx;
}

.revenue-amount {
	text-align: right;
}

.amount {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 10rpx;
	display: block;
}

.status {
	font-size: 24rpx;
	
	&.completed {
		color: #4CD964;
	}
	
	&.processing {
		color: #1B6EF3;
	}
	
	&.cancelled {
		color: #999;
	}
}

.no-more {
	text-align: center;
	color: #999;
	font-size: 24rpx;
	padding: 30rpx 0;
}

/* 弹窗样式 */
.popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
}

.popup-mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
}

.popup-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 30rpx;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.popup-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.close-btn {
	font-size: 40rpx;
	color: #999;
	padding: 10rpx;
	line-height: 1;
}

.time-options {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
	margin-bottom: 30rpx;
}

.time-option {
	width: calc(50% - 10rpx);
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #f5f5f5;
	border-radius: 12rpx;
	font-size: 28rpx;
	color: #333;
	
	&.active {
		background-color: #1B6EF3;
		color: #fff;
	}
}

.custom-time {
	background-color: #f5f5f5;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 30rpx;
}

.picker-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	font-size: 28rpx;
	color: #333;
	
	&:first-child {
		border-bottom: 1rpx solid #eee;
	}
}

.confirm-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	background-color: #1B6EF3;
	color: #fff;
	font-size: 32rpx;
	border-radius: 44rpx;
	margin: 0;
}

/* 底部导航栏样式 */
.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-around;
	align-items: center;
	box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nav-item image {
	width: 48rpx;
	height: 48rpx;
	margin-bottom: 6rpx;
}

.nav-item text {
	font-size: 22rpx;
	color: #666;
}

.nav-item.active text {
	color: #1B6EF3;
}
</style>
